<template>
	<view class="totalContent">

		<view class="hear-title">
			<view class="title">{{ tname }}</view>
			<view class="showMsg" @click="openAll()">{{ isOpen ? "全部收起" : "全部展开" }}</view>
		</view>


		<!-- <uni-collapse> -->
		<uni-collapse ref="collapse">
			<view class="lists" v-for="(item,index) in listData">
				<uni-collapse-item :open="item.open" :morenHeight="0">
					<template v-slot:title>
						<!-- 这里可以放置任何自定义的标题内容 -->
						<view class="custom-title">
							<view class="cus-left">
								<image referrerpolicy="no-referrer" src="/static/workImg/icon@5.png"></image>
								<text>第{{chineseNumbers(index)}}题</text>
							</view>

							<view class="tag">
								<view class="num">{{item.avg_score }}</view>
								<view class="txt">平均分</view>
							</view>
							<view class="tag">
								<view class="num">{{item.tiScroce}}</view>
								<view class="txt">题目满分</view>
							</view>
						</view>
					</template>
					<!-- 折叠项的内容 -->
					
					<view class="showRow">
						<view class="article-list">
							<view class="article-content">
								{{item.templateSettings.content}}
							</view>
							<view class="article-question"  v-for="(items,indexs) in item.questions" :key="indexs">
								<view class="question-title"  style="white-space:pre-line">
									(本题平均分: 4.44]{{items.trunk.body}}
								</view>
								<view v-if="items.trunk.attachments[0].url.indexOf('.png')==-1">
									<AudioPlayer :src="resmain+items.trunk.attachments[0].url" />
								</view>
								<view v-else>
									<image :src="resmain+items.trunk.attachments[0].url" style="width: 120rpx;height: 120rpx;"></image>
								</view>
								<view v-if="items.children.length>0" >
									<view  class="question-title"  v-for="(childrenItem,indexss) in items.children">
										<view style="white-space:pre-line">
											{{ childrenItem.trunk.body }}
										</view>
										<view v-if="childrenItem.trunk.attachments.length > 0">
											<!--												<AudioPlayer :src="resmain + childrenItem.trunk.attachments[0].url" />-->
											<view v-if="childrenItem.trunk.attachments[0].url.indexOf('.png')==-1">
												<AudioPlayer :src="resmain+childrenItem.trunk.attachments[0].url" />
											</view>
											<view v-else>
												<image :src="resmain+childrenItem.trunk.attachments[0].url" style="width: 120rpx;height: 120rpx;"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="descItem">
							<view class="course-grade">
								<view class="grade-text" :class="{'active-tab': item.currentIndex == indexs}"
									v-for="(items, indexs) in tabText" :key="indexs" @tap="handleSwitchTab(indexs,item,index)">

									<view class="text"> {{items}} </view>
								</view>
							</view>
							<view class="tabCard" v-if="item.currentIndex==1">
								<view class="title">
									<view class="text">姓名</view>
									<view class="text">得分</view>
									<view class="text">答题记录</view>
								</view>
								<view class="lists">
									<view class="li" v-for="(student_item, student_index) in studentsList[index].studentList" :key="index">
										<view class="name name1">{{ student_item.name }}</view>
										<view class="name name2">{{student_item.score}}</view>
										<view class="name name3" v-if="student_item.myvideosource">
											<AudioTeshu :src="student_item.myvideosource" />
										</view>
									</view>
								</view>
							</view>


							<view class="desc" v-if="item.currentIndex == '0'">
								<view v-for="(itemti,indexti) in item.questions">
									<view v-if="itemti.children.length==0">{{itemti.answer}}</view>
									<view v-if="itemti.children.length>0">
										<view v-for="(itemsti,indexsti) in itemti.children">
											{{itemsti.sort}}. {{itemsti.answer}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</view>

		</uni-collapse>
	</view>
</template>

<script>
	import AudioPlayer from "@/components/AudioPlayer/index.vue";
	import AudioTeshu from "@/components/AudioTeshu/index.vue";
	export default {
		components: {AudioPlayer,AudioTeshu},
		data() {
			return {
				optionData: {},
				tabText: ['参考答案', '学生列表'],
				currentIndex: 0,
				resmain:'',
				listData: [],
				isPlaying: false,
				audioCtx: null,
				duration: 0,
				currentTime: 0,
				progress: 0,
				seekerLeft: 0,
				isSeeking: false,
				tname:'',
				isOpen:true,
				studentsList:[
				]
			}
		},
		created() {
			// this.initAudio();
		},
		onLoad(option) {
			this.optionData = {
				id: option.id,
				tid: option.tid,
			}
			this.tname=option.tname;
			console.log('tid--option', option, this.optionData)
		},
		mounted() {
			this.getList()
			this.getKeHouList()
			// this.getKeHouList9911()
		},
		methods: {
			chineseNumbers(index) {
				// 创建一个映射数组，注意索引是从0开始的，所以"一"对应0，"二"对应1，以此类推
				const chineseNumberMap = ["一", "二", "三", "四", "五", "六", "七", "八", "九","十","十一","十二","十三","十四","十五","十六","十七","十八","十九","二十","二十一","二十二","二十三","二十四","二十五","二十六","二十七","二十八","二十九","三十"];
				
				// 检查索引是否在映射范围内
				if (index >= 0 && index < chineseNumberMap.length) {
					return chineseNumberMap[index];
				}
				// 如果索引超出范围，可以返回一个默认值或抛出错误
				return "超出范围";
			},
			openAll(){
				this.isOpen = !this.isOpen;
				//console.log("====",this.isOpen)
				if(!this.isOpen){
					this.listData.map((item)=>{
						item.open = false;
						
					})
				}else{
					this.listData.map((item)=>{
						item.open = true;
					})
				}
				console.log("=====this.listData",this.listData)
			},
			initAudio() {
				console.log(this.src)
				this.audioCtx = uni.createInnerAudioContext();
				this.audioCtx.src = this.src;
				this.audioCtx.onPlay(() => {
					this.isPlaying = true;
				});
				this.audioCtx.onPause(() => {
					this.isPlaying = false;
				});
				this.audioCtx.onTimeUpdate(() => {
					if (!this.isSeeking) {
						this.currentTime = this.audioCtx.currentTime;
						this.progress = (this.currentTime / this.duration) * 100;
						this.seekerLeft = this.progress;
					}
				});
				this.audioCtx.onEnded(() => {
					this.isPlaying = false;
				});
				this.audioCtx.onError((err) => {
					console.error('音频播放错误:', err);
				});
				this.audioCtx.onCanplay(() => {
					this.duration = this.audioCtx.duration;
				});
			},
			togglePlayback() {
				if (this.isPlaying) {
					this.audioCtx.pause();
				} else {
					this.audioCtx.play();
				}
			},
			seekStart() {
				this.isSeeking = true;
			},
			seeking(event) {
				if (!this.duration) return;
				const rect = uni.getSystemInfoSync().windowWidth - 20;
				const ratio = event.mp.touches[0].pageX / rect;
				console.log(ratio, 'ratio')
				if (ratio <= 0) {
					this.seekerLeft = 0;
				} else if (ratio >= 1) {
					this.seekerLeft = 100;
				} else {
					this.seekerLeft = ratio * 100;
					this.currentTime = ratio * this.duration;
				}
			},
			seekEnd() {
				this.audioCtx.seek(this.currentTime);
				this.isSeeking = false;
			},
			getList() {
				var that = this
				var data = {
					id: that.optionData.id,
					tid: that.optionData.tid,
				}
				that.$post('new_homework/teacher_homework_detail_question_list', data).then(res => {
					console.log('题目详情-题目列表', res);
					if (res.code != 0) {
						that.resmain = res.data.question_info.resmain;
						that.listData = res.data.question_info.resource.items
						that.studentsList = res.data.student_list;
						console.log("==that.listData",that.listData,that.studentsList)
						let chaNum = that.listData.length - that.studentsList.length ;
						for(let i = 0; i < chaNum; i++){
							let item = {studentList:[]};
							that.studentsList.push(item)
						}
						that.listData.map((item=>{
							let scoreFinal = 0;
							item.open = true
							item.scores.forEach((items,indexs)=>[
								scoreFinal+=items.score
							])
							item.tiScroce = scoreFinal;
							
						}))
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getKeHouList() {
				var that = this
				var data = {
					id: that.optionData.id,
					tid: that.optionData.tid,
				}
				// https://d-xueer.bigchun.com/api/new_homework/teacher_homework_detail_question_details
				that.$post('new_homework/teacher_homework_detail_question_details', data).then(res => {
					console.log('题目详情-题目内容-参考答案', res);
					if (res.code != 0) {
						// that.totalData = res.data.census
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getKeHouList9911() {
				var that = this
				var data = {
					id: 8,
					tid: 1045747,
					// id: that.optionData.id,
					// tid: that.optionData.tid,
				}
				// new_homework/teacher_homework_detail_question_details
				that.$post('new_homework/teacher_homework_detail_question_details', data).then(res => {
					console.log('题目详情-题目内容-学生列表', res);
					if (res.code != 0) {
						// that.totalData = res.data.census
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},

			handleSwitchTab(indexs,item,index) {
				item.currentIndex = indexs;
				this.listData.splice(index,1,item);
				// if (index === 0) {
				// 	this.renderData = this.database;
				// } else {
				// 	this.renderData = this.database.filter(val => val.index === index);
				// }
			},
		}
	}
</script>

<style scoped>
	.totalContent {
		overflow: hidden;
		/* background: orange; */
		margin: 0 30rpx;
	}
	
	.totalContent .hear-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 13px;
		color: #333333;
		font-weight: 600;
		margin-top: 40rpx;
	}
	
	.totalContent .hear-title .showMsg {
		font-weight: 400;
	
	}
	
	/*  */
	.totalContent .uni-collapse {
		background: none;
	}
	
	.totalContent .lists {
		/* margin: 10px; */
		background: #fff;
		margin-top: 30rpx;
		/* width: 343px; */
		/* height: 52px; */
		border-radius: 12px;
		/* padding: 30rpx 10rpx 0 30rpx; */
		/* margin: 30rpx 0 30rpx 0; */
	}
	
	.totalContent .lists .custom-title {
	
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.totalContent .lists .custom-title .cus-left {}
	
	.totalContent .lists .custom-title .cus-left image {
		width: 18px;
		height: 17px;
		margin: 0 30rpx 0 32rpx;
	}
	
	.totalContent .lists .custom-title .cus-left text {}
	
	.totalContent .lists .custom-title {
		height: 52px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-right: 30rpx;
	}
	
	.totalContent .lists .custom-title .tag {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.totalContent .lists .custom-title .tag view {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 12px;
		color: #222222;
		line-height: 17px;
		text-align: right;
		font-style: normal;
	}
	
	.totalContent .lists .custom-title .tag .txt {
		color: #666666;
	}
	
	.totalContent .lists .showRow {
		margin: 0 30rpx;
	}
	
	.totalContent .lists .showRow .desc {
		font-weight: 400;
		font-size: 13px;
		color: #727A8E;
		line-height: 23px;
		text-align: justify;
		font-style: normal;
	
	}
	
	.totalContent .lists .showRow .descItem {
		border-top: 2rpx solid #eee;
		padding: 20rpx 0;
	}
	
	/* course-grade */
	.course-grade {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		color: #fff;
		/* height: 90rpx; */
		font-weight: 600;
		font-size: 13px;
		margin: 20rpx 0 40rpx;
	}
	
	.course-grade .grade-text {
		margin-right: 40rpx;
		/* line-height: 80rpx; */
		font-weight: 600;
		font-size: 16px;
		color: #222222;
	}
	
	.course-grade .active-tab {
		color: #2979FF;
	}
/* tabItem  xuesheng*/
	.descItem .tabCard {
	/* 	background: #FFFFFF;
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(0, 50, 83, 0.05);
		border-radius: 24rpx;
		overflow: hidden;
		padding-bottom: 10rpx;
		margin-top: 30rpx; */
	}
	
	.descItem .tabCard .title {
		height: 80rpx;
		background: #7AA7FF;
		border-radius: 24rpx 24rpx 0 0;
		display: flex;
		/* margin: 30rpx 0; */
		
	}
	
	.descItem .tabCard .title .text {
		display: block;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;	
	}
	.descItem .tabCard .title .text:nth-of-type(1){width: 20%;}
	.descItem .tabCard .title .text:nth-of-type(2){width: 30%;}
	.descItem .tabCard .title .text:nth-of-type(3){width: 60%;}
	/* .descItem .tabCard .title .text:nth-of-type(4){width: 30%;} */
	.descItem .tabCard .lists {
		/* margin: 0 30rpx; */
		background: #F4F5F7;
		margin: 0!important;
		border-radius: 0!important;
	}
	.descItem .tabCard .lists .li {
		display: flex;
		align-items: center;
		height: 80rpx;
	}
	.descItem .tabCard .lists .li .name {
		min-height: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: center;
		
	}
	.descItem .tabCard .lists .li .name1{width: 20%;}
	.descItem .tabCard .lists .li .name2{width: 20%;}
	.descItem .tabCard .lists .li .name3{width: 60%; }
	/* .audio-player {
		width: 622rpx;
		height: 104rpx;
		background-color: rgba(41, 121, 255, 0.05);
		border-radius: 12rpx;
		background-image: url('../../static/audio.png');
		background-size: 32rpx 40rpx;
		background-position: center;
		background-repeat: no-repeat;
		margin-bottom: 32rpx;
	} */
	
	.audio-player {
		display: flex;
		align-items: center;
		width: 686rpx;
		min-height: 96rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(74,144,246,0.06);
		border-radius: 24rpx;
		padding: 40rpx 28rpx 40rpx 40rpx;
		box-sizing: border-box;
	}
	
	.controls {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.play-pause {
		font-size: 20px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.paly-icon {
		width: 48rpx;
		height: 48rpx;
	}
	
	.progress-bar {
		width: 176rpx;
		height: 12rpx;
		background-color: rgba(114, 122, 142, 0.10);
		border-radius: 6rpx;
		position: relative;
		margin-left: 48rpx;
	}
	
	.progress {
		height: 100%;
		background-color: #007aff;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 6rpx;
	}
	
	.seeker {
		width: 28rpx;
		height: 28rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.13);
		border: 2rpx solid #2979FF;
		border-radius: 50%;
		position: absolute;
		top: -10rpx;
		transform: translateX(-50%);
		z-index: 1;
	}
	.article-list {
		padding: 0 32rpx 32rpx;
		box-sizing: border-box;
	}
	
	.article-content {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 46rpx;
		text-align: justify;
		font-style: normal;
		margin-bottom: 48rpx;
	}
	
	.article-question {}
	
	.question-title {
		font-family: PingFangSC, PingFang SC;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 40rpx;
	}
	
	.question-answer-list {
		display: flex;
		flex-direction: column;
	}
	
	.article-answer {
		height: 68rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		margin-bottom: 34rpx;
		position: relative;
		padding-left: 98rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #A6A9BD;
	}
	
	.article-answer::after {
		width: 68rpx;
		height: 68rpx;
		border-radius: 50%;
		background: #FFFFFF;
		border: 2rpx solid #F5F5F5;
		position: absolute;
		top: -17rpx;
		left: 0;
		text-align: center;
		line-height: 64rpx;
	}
	
	.article-answer:nth-child(1)::after {
		content: 'A';
	}
	
	.article-answer:nth-child(2)::after {
		content: 'B';
	}
	
	.article-answer:nth-child(3)::after {
		content: 'C';
	}
	
	.question-answer {
		display: flex;
		align-items: baseline;
	}
	
	.question-answer-collapse {
		width: 240rpx;
	}
	
	.word-right {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #2979FF;
		line-height: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: uppercase;
	}
</style>
